<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item @tap="clickBanner(item)" v-for='(item,index) in bannerList' :key='index'>
				<image class="swiper-image" :src="item.img"></image>
			</swiper-item>
		</swiper>

		<!--精选分类-->
		<scroll-view scroll-x style="width: 100%;">
			<view class="padding flex">
				<view @tap="clickCatagory(item)" style="width:60px;margin-right:20px;text-align: center;" v-for="(item,index) in catas"
				 :key="index">
					<image style="width: 60px;height: 60px;object-fit: cover;margin-bottom: 2px;border-radius: 50%;" mode="aspectFill" :src="item.icon"></image>
					<view class="text-sm">{{item.title}}</view>
				</view>
			</view>
		</scroll-view>
		<!-- <item-container :num='catas.num' :banner='catas.banner' :datas='catas.data'></item-container> -->

		<!--秒杀-->
		<skill :skill="skills"></skill> 
		
		<!--功能区-->
		<view class="flex align-center justify-between" style="width: 100%;">
			<view @tap="clickCoupon" class="flex align-center margin-sm padding-sm" style="flex: 1;background-color: #FFF0F0;border-radius: 4px;">
				<image src="../../static/coupon.png" style="width: 20px;height: 20px;"></image>
				<view class="margin-left">
					<view>优惠券</view>
					<view class="text-sm text-grey margin-top-xs">先领券，再购物</view>
				</view>
			</view>
			<view @tap="clickTopic" class="flex align-center margin-sm padding-sm" style="flex: 1;background-color: #ECF9FA;border-radius: 4px;">
				<image src="../../static/tab/topic_s.png" style="width: 20px;height: 20px;"></image>
				<view class="margin-left">
					<view>专题</view>
					<view class="text-sm text-grey margin-top-xs">个性专题随心荐</view>
				</view>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="margin text-center">
			<view class="flex justify-center align-center">
				<text style="background-color: #1C232B;height: 1px;width: 50px;"></text>
				<text style="color: #1C232B;margin: 0 15px;font-size: 13px;font-weight: bold;">◆ 大家都在买 ◆</text>
				<text style="background-color: #1C232B;height: 1px;width: 50px;"></text>
			</view>
			<view style="font-size: 10px;color: grey;">HOT GOODS</view>
		</view>
		<list-mall :num='geusts.num' :banner='geusts.banner' :datas='geusts.datas'></list-mall>
	</view>
</template>

<script>
	//import itemContainer from '@/components/devm/index/item-container.vue'
	import listMall from '@/components/devm/index/list-mall.vue'
	import skill from '@/components/devm/index/skill.vue'

	var _this;
	export default {
		components: {
			//itemContainer,
			listMall,
			skill
		},
		data() {
			return {
				bannerList: [],
				catas: [],
				skills:{},
				geusts: {
					//banner数据	
					// banner: {
					// 	title: '热卖',
					// 	link: '更多',
					// },
					//商品信息				
					datas: [],
					//一行显示的商品个数	
					num: 2
				}
			}
		},
		onShareAppMessage() {
			
		},
		onLoad() {
			_this = this;
			this.initBanners();
			this.initJinxuanCata();
			this.initGuests();
			this.initCartNum();
			this.initSkill();
		},
		onShow() {
			//每次都刷新tabbar购物车数量 
			if (this.$global.data.cartNum > 0) {
				uni.setTabBarBadge({
					index: 2,
					text: this.$global.data.cartNum + ''
				})
			}
		},
		onPullDownRefresh() {
			this.initBanners();
			this.initJinxuanCata();
			this.initGuests();
			this.initCartNum();
			this.initSkill();
			uni.stopPullDownRefresh();
		},
		methods: {
			initCartNum() { //首页进入，请求购物车，放入到全局变量，并刷新tabbar数量 
				var that = this;
				this.$get('mall/cart/count', {}).then((res) => {
					if (res.data) {
						that.$global.changCartNum(res.data)
						uni.setTabBarBadge({
							index: 2,
							text: that.$global.data.cartNum + ''
						})
					}
				})
			},
			initSkill() {
				this.$get('mall/sku/skill').then((res) => {
					//console.log(res)
					this.skills = res.data;
					// console.log(this.skills);
				})
			},
			//banner
			initBanners() {
				this.$get('mall/banner/commonlist').then((res) => {
					//console.log(res)
					if (res.data) {
						_this.bannerList = [];
						for (var k = 0; k < res.data.length; k++) {
							_this.bannerList.push(res.data[k])
						}
					}
				})
			},
			//精选分类
			initJinxuanCata() {
				this.$get('mall/cata/commonlist').then((res) => {
					//console.log(res)
					if (res.data) {
						_this.catas = [];
						for (var k = 0; k < res.data.length; k++) {
							var item = {
								id: res.data[k].id,
								icon: res.data[k].icon,
								title: res.data[k].name,
							}
							_this.catas.push(item)
						}
					}
				})
			},
			//猜你喜欢
			initGuests() {
				this.$get('mall/sku/commonpage?isShumbInfo=true').then((res) => {
					//console.log(res)
					if (res.data) {
						_this.geusts.datas = [];
						for (var k = 0; k < res.data.items.length; k++) {
							var item = {
								id: res.data.items[k].id,
								uri: res.data.items[k].thumbnail,
								title: res.data.items[k].name,
								specialprice: '￥' + res.data.items[k].priceSale,
								//originprice: '￥418'
							}
							_this.geusts.datas.push(item)
						}
					}
				})
			},
			clickCatagory(item) {
				uni.navigateTo({
					url: '/pages/product/list?cataid=' + item.id
				})
			},
			clickBanner(item) {
				if (item.opentype == 'minipage') {
					this.$jump('/pages/product/detail?skuNo=' + item.url)
				} else if (item.opentype == 'h5') {
					this.$jump('/pages/webview?url=' + encodeURIComponent(item.url))
				}
			},clickTopic(){
				uni.switchTab({
					url:'/pages/topic/index'
				})
			},clickCoupon() {
				this.$checkAuth(function() {
					uni.navigateTo({
						url:'/pages/mine/coupon'
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 360upx;

		.swiper-image {
			height: 360upx;
			width: 100%;
		}
	}

	page {
		background-color: #FFFFFF;
	}
</style>
